<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人社保计算软件</title>
		<link rel="stylesheet" href="dist(bootstrap框架所需插件)\css\bootstrap.min.css">
		
		    <link rel="stylesheet" href="">
		    <!-- 使用bootstrap框架样式和js时必须引入这两个核心对象 -->
		
		    <script src="jquery-3.6.0.js"></script>
		    <script scr="dist(bootstrap框架所需插件)\css\bootstrap.min.js"></script>
			
			
		        <script type="text/javascript">
		  
		  function computed(){
			  sal=document.getElementById("salary").value;
			  salnum=parseInt(sal);//把字符串转换为数字，不识别小数点
			  //计算养老保险
			  ylgr_01 = salnum * 0.08;
			  ylgs_01 = salnum * 0.2;
			  document.getElementById("ylgr").innerText=ylgr_01;
			  document.getElementById("ylgs").innerText=ylgs_01;
			  //医保计算
			  yibao_person_01=salnum * 0.02;
			  yibao_company_01 = salnum * 0.06;
			  document.getElementById("yibaogr").innerText=yibao_person_01;
			  document.getElementById("yibaogs").innerText=yibao_company_01;
			  //计算失业保险
			  unemployed_person = salnum * 0.005;
			  unemployed_company = salnum * 0.015;
			  document.getElementById("unemployed_person").innerText=unemployed_person;
			  document.getElementById("unemployed_company").innerText=unemployed_company;
			  //计算工伤保险 个人无需缴费
			  work_harm_company = salnum * 0.005 ;
			  document.getElementById("work_harm_company").innerText = work_harm_company;
			  //计算生育保险
			  raise_company = salnum * 0.008;
			  document.getElementById("raise_company").innerText = raise_company;
			  //计算公积金
			  public_gold_person = salnum * 0.12 ;
			  public_gold_firm = salnum * 0.12 ;
			  document.getElementById("public_gold_person").innerText=public_gold_person;
			  document.getElementById("public_gold_firm").innerText=public_gold_firm;
		  
		     //计算总额
			 people_total = ylgr_01 + yibao_person_01 + unemployed_person+ public_gold_person;
		     firm_total = ylgs_01 + yibao_company_01+ unemployed_company+  work_harm_company+raise_company+ public_gold_firm;
		     document.getElementById("person_total").innerText= people_total;
			 document.getElementById("firm_total").innerText = firm_total;
			 //总额
			 total = salnum + firm_total;
			 document.getElementById("total").innerText = total;
		  }
		
		</script>
			
			
			
	</head>
	<body>
		
		<div id="" class="container text-center ">
			<h1>个人社保计算软件-刘伟杰-Web版</h1>
			<!-- div是层  span是块 -->
			<table class="table table-bordered text-left"  cellspacing="" cellpadding="">
				<!-- <tr>
					<caption></caption>
					<th>工资salary</th>
					<th ></th>
					<th>Header</th>
				</tr> -->
				<tr name="caption" align="center">
					<td>
						工资
					</td>
					<td colspan="3">
						<input value="8000" id="salary" class="form-control" placeholder="8000" type="text" name="" id="" />
					</td>
					<td><button onclick="computed()" style="border:0;height:34px" class="btn-success btn-block" type="button">计算</button></td>
				</tr>
				<tr class="bg-success"   name="percent" align="center">
					<td>险种</td>
					<td>个人税%</td>
					<td>个人税￥</td>
					<td>公司税%</td>
					<td>公司税￥</td>
				</tr>
				<tr name="" align="center">
					<td >养老</td>
					<td >8%</td>
					<td id="ylgr"></td>
					<td>20%</td>
					<td id="ylgs"></td>
				</tr>
				<tr align="center">
					<td>医保</td>
					<td >2%</td>
					<td id="yibaogr"></td>
					<td>6%</td>
					<td id="yibaogs"></td>
				</tr>
				<tr align="center">
					<td>失业</td>
					<td>0.5%</td>
					<td id="unemployed_person"></td>
					<td>1.5%</td>
					<td id="unemployed_company"></td>
				</tr>
				<tr align="center">
					<td>工伤</td>
					<td></td>
					<td></td>
					<td>0.5%</td>
					<td id="work_harm_company"></td>
				</tr>
				<tr align="center">
					<td>生育</td>
					<td></td>
					<td></td>
					<td>0.8%</td>
					<td id="raise_company"></td>
				</tr>
				<tr align="center">
					<td>公积金</td>
					<td>12%</td>
					<td id="public_gold_person"></td>
					<td>12%</td>
					<td id="public_gold_firm"></td>
				</tr>
				 <tr align="center">
				 	<td>合计</td>
				 	<td>个人合计</td>
				 	<td id="person_total"></td>
				 	<td>公司合计</td>
				 	<td id="firm_total"></td>
				 </tr>
				 <tr align="center">
				 	<td>总额</td>
				 	<td id="total" colspan="4"></td> 
				 </tr>
				 
			</table>
			<img alt="" title="" width="300" src="img/二维码.png" >
		</div>
		
		
		
		
	</body>
</html>
